Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
  <div id="particles-js"></div>
  
  <svg width="100%" height="100%" viewBox="0 0 900 900" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5; fill: rgb(0, 0, 0); stroke: none; stroke-width: 1px; opacity: 1; filter: none;" id="svg4571" preserveAspectRatio="xMidYMid" class="base-image">
    <defs id="defs2515"></defs>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #000;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1 / 1;
  cursor: none;
}

.base-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}

.final-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  clip-path: circle(0px at var(--x, 0px) var(--y, 0px));
  will-change: clip-path;
}

.container:hover .final-image {
  clip-path: circle(10% at var(--x, 0px) var(--y, 0px));
}

#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .container {
    max-width: 90%;
  }

.container:hover .final-image {
    clip-path: circle(15% at var(--x, 0px) var(--y, 0px));
  }
}

@media (max-width: 480px) {
  .container {
    max-width: 100%;
  }

.container:hover .final-image {
    clip-path: circle(20% at var(--x, 0px) var(--y, 0px));
  }
}

console.log("Event Fired")
const container = document.querySelector(".container");
const finalImage = document.querySelector(".final-image");

container.addEventListener("mousemove", (event) => {
  window.requestAnimationFrame(() => {
    const rect = container.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    finalImage.style.setProperty("--x", `${x}px`);
    finalImage.style.setProperty("--y", `${y}px`);
  });
});

particlesJS("particles-js", {
  particles: {
    number: {
      value: 52,
      density: {
        enable: true,
        value_area: 600
      }
    },
    color: {
      value: "#fff"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      }
    },
    opacity: {
      value: 0.6,
      random: true,
      anim: {
        enable: false
      }
    },
    size: {
      value: 5,
      random: true,
      anim: {
        enable: false
      }
    },
    line_linked: {
      enable: false
    },
    move: {
      enable: true,
      speed: 2,
      direction: "bottom",
      random: false,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: {
        enable: false
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false
      },
      onclick: {
        enable: true
      },
      resize: true
    }
  },
  retina_detect: true
});

Frontend Forever App